<template>
<!-- 这是我的积分订单兑换记录 -->
  <div id="pointsOrder">
    <div class="orderContent">
      <h4>积分订单兑换记录</h4>
      <el-tabs type="border-card" @tab-click="handleClick">
        <el-tab-pane label="全部记录"></el-tab-pane>
        <el-tab-pane label="兑换记录"></el-tab-pane>
        <el-tab-pane label="中奖记录"></el-tab-pane>
      </el-tabs>
      <div class="exchangeRecord" v-for="data in list" :key="data.orderid">
        <h4 class="status">{{data.status | orderStatus}}</h4>
        <div class="orderTitle">
          订单号：{{data.orderNum}}
        </div>
        <div class="integralGoods">
          <div class="goodsImage">
            <img src="../../../public/img/coffe.jpg" alt="">
          </div>
          <div class="goodsTitle">
            <span>{{data.title}}</span>
          </div>
          <div class="pointPrice">
            {{data.integral}} 积分<br/>
            ￥{{data.price}} 兑换
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          orderid: 0,   // 订单id
          status: 0,    // 订单状态 0 待发货，1 已完成
          orderNum: "EE20210122170830772738",     // 订单号
          imgUrl: "",     // 图片路径
          title: "积分商品标题1",
          integral: 100,      // 积分
          price: 1.5,         // 价格
        },
        {
          orderid: 1,   // 订单id
          status: 0,    // 订单状态
          orderNum: "EE20210122170830772737",     // 订单号
          imgUrl: "",     // 图片路径
          title: "积分商品标题2",
          integral: 110,      // 积分
          price: 100,         // 价格
        },
        {
          orderid: 2,   // 订单id
          status: 1,    // 订单状态
          orderNum: "EE20210122170830772733",     // 订单号
          imgUrl: "",     // 图片路径
          title: "积分商品标题3",
          integral: 200,      // 积分
          price: 1.5,         // 价格
        },
        {
          orderid: 3,   // 订单id
          status: 0,    // 订单状态
          orderNum: "EE20210122170830772735",     // 订单号
          imgUrl: "",     // 图片路径
          title: "积分商品标题4",
          integral: 1000,      // 积分
          price: 2,         // 价格
        },
        {
          orderid: 4,   // 订单id
          status: 1,    // 订单状态
          orderNum: "EE20210122170830772721",     // 订单号
          imgUrl: "",     // 图片路径
          title: "积分商品标题5",
          integral: 100,      // 积分
          price: 0,         // 价格
        }
      ]
    }
  },
  methods: {
    // 导航栏标签页切换
    handleClick() {
      console.log("");
    },
  },
  filters: {
    // 订单状态
    orderStatus(status) {
      let text = "";
      switch (status) {
        case 0:
          text = "待发货";
          break;
        case 1:
          text = "已完成";
          break;
        default:
          break;
      }
      return text;
    }
  }
}
</script>

<style lang="less" scoped>
.orderContent {
  h4 {
    font-size: 21px;
    margin-bottom: 22px;
  }
  .exchangeRecord {
    border: 1px solid #ccc;
    margin-bottom: 20px;
    font-size: 16px;
    .status {
      color: #FF6600;
      margin: 0px;
      margin-top: 15px;
      text-indent: 20px;
    }
    .orderTitle {
      font-size: 16px;
      padding: 10px 20px;
      border-bottom: 1px solid #ccc;
    }
    .integralGoods {
      cursor: pointer;
      padding: 12px 15px 20px;
      // width: 100%;
      .goodsImage {
        display: inline-block;
        width: 70px;
        height: 70px;
        img {
          height: 100%;
        }
      }
      .goodsTitle {
        display: inline-block;
        text-indent: 30px;
        width: calc(100% - 75px - 120px);
        vertical-align: middle;
        span {
          width: 450px;
          display: inline-block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
      .pointPrice {
        display: inline-block;
        text-align: right;
        width: 120px;
        padding-right: 15px;
        vertical-align: middle;
        color: #FF2200;
      }
    }
  }
  
}
  // 标签页，底部边框
  /deep/ .el-tabs--border-card {
    border: 0px;
    box-shadow: none;
  }
  /deep/ .el-tabs--border-card > .el-tabs__header {
    background-color: transparent;
    border: 0px;
    margin-bottom: 40px;
  }
  /deep/ .el-tabs--border-card {
    background-color: transparent;
  }
  /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
    color: #ff6700;
  }
  /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #ff6700;
  }
  /deep/ .el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }
  /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border-right: 1px solid #ccc;
    height: 25px;
    line-height: 25px;
  }
  /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child {
    border-right: 0px;
  }
</style>